.{$px}CategoriesButton
    width: 304px;
    margin-top: -1px
    margin-bottom: -1px
    letter-spacing: 1.4px;
    position: relative
    background-color: clr-dk;
    +m('phone')
        width: auto
    &-title
    &-link
        padding: 29px 30px 25px 0
        margin-left: 34px
        margin-right: 34px
        display: flex
        align-items: center
        color: clr-white;
        font-size: font-nrm;
        font-weight: 500;
        line-height: 1.2em
        text-transform: uppercase;
        letter-spacing: 1.4px;
        position: relative
        +m('phone')
            font-size: (font-nrm - 1)
            padding-right: 25px
            margin-left: 15px
            margin-right: 15px
        
    &-title
        cursor: pointer
        margin-left: 0
        margin-right: 0
        padding-left: 34px
        padding-right: 64px
        +e(-arrow)
            right: 34px
            +m('phone')
                right: 5px !important
        +m('phone')
            padding-right: 35px
            padding-left: 15px
            +e(-arrow)
                right: 15px
        
    &-link
        padding: 0
        display: block
        & + &
            border-top: #ebebeb 1px solid
        +e(-arrow)
            background: img('icons', 'arrowMuted.svg') center center no-repeat
            transform: translateY(-50%) rotate(-90deg)
        +m('desktop')
            &:hover
                +e(-submenu)
                    margin-left: 0
                    display: block !important
            
        
        
    &-link a
        align-items: center
        display: flex
        padding: 29px 30px 25px 0
        background: transparent
        color: #555555;
        padding-top: 12px
        padding-bottom: 12.5px
        font-size: font-nr;
        font-weight: 400;
        +m('desktop')
            &:hover
                color: clr-primary
                font-weight: 500
                border-bottom-color: transparent
        +m('phone')
            font-size: (font-nrm - 1)
            padding-right: 25px
    &-arrow
        position: absolute
        right: 0
        top: 50%
        transform: translateY(-50%)
        background: img('icons', 'arrowSlide.svg') center center no-repeat
        width: 30px
        height: 30px
        z-index: 10
        display: block
        +m('desktop')
            &:hover
                border-bottom-color: transparent
                position: absolute !important
            
    &-icon
        margin-right: 17px
        min-width: 26px
        max-width: 26px
        display: flex
        justify-content: center
        align-items: center
        
    &-content
        position: absolute
        top: 100%
        left: 0
        right: 0
        padding-top: 15px
        padding-bottom: 15px
        display: none
        border: 2px solid clr-primary;
        border-top: 0
        z-index: 900
        background-color: clr-white;
    &-submenu
        position: absolute
        left: 100%
        margin-left: 15px
        top: 0
        background: clr-white
        box-shadow: 1px 1px 5px rgba(#000, 0.3)
        display: none
        z-index: 10
        +m(700px)
            left: 0
            margin-left: 10px
            margin-top: 10px
            top: 100%
    &_OPEN
        +e(-content)
            display: block
